<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/Rotationsettings')" label="Rotationsettings">轮播设置
        </el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/Rolemanagement')" label="Rolemanagement">角色管理
        </el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/announcement')" label="announcement">公告提示
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="Rotation">
      <div class="point-all">
        <!-- 积分统计左边内容 -->
        <!-- 积分统计右边内容 -->
        <div class="point-right" v-show="rightContent === 0">
          <div class="point-top flex jc-sb ai-c">
            <div class="flex">
              <div>
                <el-input clearable v-model="content" placeholder="请输入标题进行搜索" class="search"></el-input>
              </div>
              <div>
                <el-select clearable v-model="type" placeholder="请选择类型">
                  <el-option v-for="item in options" :key="item.valueoptions" :label="item.label"
                    :value="item.valueoptions">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-select v-model="status" placeholder="请选择状态">
                  <el-option v-for="item in optionssecond" :key="item.valueChoose" :label="item.labelsecond"
                    :value="item.valueChoose">
                  </el-option>
                </el-select>
              </div>
              <div class="lunbo-search">
                <el-button @click="handleNoticePage"></el-button>
              </div>
            </div>
            <div style="margin-right: 0" class="lunbo-add">
              <el-button style="margin-right: 0" @click="addPage()">新增</el-button>
            </div>
          </div>
          <div class="form-list">
            <el-table stripe :data="tables" ref="multipleTable" @selection-change="handleSelectionChange">
              <!-- <el-table-column type="selection" width="55"></el-table-column> -->
              <el-table-column prop="title" label="通知标题"></el-table-column>
              <el-table-column prop="type" label="所在端">
                <template slot-scope="scope">
                  <div>{{ scope.row.type | wherearea }}</div>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <el-switch :inactive-value="1" :active-value="0" v-model="scope.row.status"
                    @change="adminNoticeUpdateStatus(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column width="160" prop="birthday" label="操作" fixed="right">
                <template slot-scope="scope">
                  <div class="Rota-two-btn">
                    <div style="margin-right: 15px" class="reset cursor" @click="see(scope.row, scope.$index)">
                      查看
                    </div>
                    <div style="margin-right: 15px" class="reset cursor" @click="edit(scope.row, scope.$index)">
                      编辑
                    </div>
                    <div class="del-have-btn cursor" @click="setdialogVisibleResetpassword(scope.row)">
                      删除
                    </div>
                    <!-- 删除弹出模态框 -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="page flex jc-c">
            <div class="page-numBer">
              <div class="block">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                  :current-page="pageNo" @current-change="currentchange">
                </el-pagination>
              </div>
            </div>
            <!-- <div class="go-page">
              <span>跳转</span>
              <input type="text" />
              <span>页</span>
            </div> -->
          </div>
        </div>

        <!-- 按人员统计 -->
        <div class="point-right" v-if="rightContent === 1">
          <v-newNoticeAdd :objdata="objdata" @close="close" />
        </div>
      </div>
    </div>
    <el-dialog title="删除" :visible.sync="dialogVisibleResetpassword" width="445px" center>
      <div class="flex jc-c">
        <span class="del-text">是否删除?</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibleResetpassword = false">取 消</el-button>
        <el-button class="surebtn" @click="adminNoticebatchDel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="titles" :visible.sync="seeDiablog" center>
      <div class="cinseffr" v-html="htmlContent">
      </div>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = [""];
import {
  adminNoticePage,
  adminNoticeUpdateStatus,
  adminNoticebatchDel,
} from "@/api/index";
import newNoticeAdd from '@/component/newNoticeAdd'
export default {
  components: {
    'v-newNoticeAdd': newNoticeAdd
  },
  data() {
    return {
      //   分组统计
      options: [
        {
          valueoptions: 0,
          label: "通用",
        },
        {
          valueoptions: 1,
          label: "pc端",
        },
        {
          valueoptions: 2,
          label: "移动端",
        },
      ],
      tables: [],
      valueoptions: "",
      resetpassword: false,
      optionssecond: [
        {
          valueChoose: "",
          labelsecond: "全部",
        },
        {
          valueChoose: 0,
          labelsecond: "有效",
        },
        {
          valueChoose: 1,
          labelsecond: "无效",
        },
      ],
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
      checkedrole: true,
      settingOne: true,
      settingTwo: true,
      settingThree: true,
      settingFour: true,
      settingFive: true,
      editShowdialogVisible: false,
      dialogVisibleResetpassword: false,
      groupbg: false,
      dialogVisibleDel: false,
      num: 0,
      // 删除
      delOne: true,
      //   分页
      pageNums: [
        {
          Numones: 5,
          numBers: "5条/页",
        },
        {
          Numones: 10,
          numBers: "10条/页",
        },
        {
          Numones: 15,
          numBers: "15条/页",
        },
      ],
      Numones: "",
      input: "",
      value: "",
      valueChoose: "",
      // 时间选择器
      valueone: "",
      countPoint: 0,
      isPoint: 0,
      rightContent: 0,
      pointAll: 0,
      content: "",
      pageNo: 1,
      pageSize: 10,
      type: '',
      status: "",
      total: 0,
      delid: "",
      tabPosition: "announcement",
      objdata: '',
      htmlContent: '',
      seeDiablog: false,
      titles: ''
    };
  },
  created() {
    this.adminNoticePage();
  },
  filters: {
    wherearea(val) {
      if (val == 0) {
        return "全部";
      } else if (val == 1) {
        return "pc端";
      } else if (val == 2) {
        return "移动端";
      }
    },
  },
  methods: {
    handleNoticePage() {
      this.pageNo = 1
      this.adminNoticePage();
    },
    close() {
      this.rightContent = 0
      this.adminNoticePage();
    },
    setdialogVisibleResetpassword(item) {
      this.delid = item.id;
      this.dialogVisibleResetpassword = true;
    },
    adminNoticebatchDel() {
      adminNoticebatchDel({
        ids: this.delid,
      }).then((res) => {
        this.adminNoticePage();
        this.dialogVisibleResetpassword = false;
      });
    },
    adminNoticeUpdateStatus(data) {
      adminNoticeUpdateStatus({
        id: data.id,
        status: data.status,
      }).then((res) => {
        this.$message.success("修改成功");
      });
    },
    currentchange(val) {
      this.pageNo = val;
      this.adminNoticePage();
    },
    adminNoticePage() {
      adminNoticePage({
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: this.type,
        status: this.status,
      }).then((res) => {
        this.tables = res.data.list;
        this.total = res.data.total;
      });
    },
    addPage() {
      this.objdata = ''
      this.rightContent = 1
    },
    edit(data) {
      this.rightContent = 1
      this.objdata = data.id
    },
    see(data) {
      this.seeDiablog = true
      this.titles = data.title
      this.htmlContent = data.content
    },
    // 删除
    delShwo() {
      this.delOne = false;
    },
    changeSwitch(data) {
      console.log(data);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },

  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
.Rotation {
  width: 100%;
  margin-top: 24px;
}

// 积分统计
.Rotation .point-all {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
}

.Rotation .point-left {
  width: 267px;

  margin-top: 15px;

  p {
    margin-left: 20px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
}

.Rotation .point-list {
  width: 267px;
  margin-top: 20px;
  height: 613px;
  border-right: 1px solid #f2f2f2;
  text-align: center;
}

.Rotation .point-list>div {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  margin-bottom: 15px;
}

.Rotation .point-list .countBg {
  color: #000000;
  font-weight: bold;
  background-color: #f2f2f2;
}

.point-right {
  // width: 1000px;
  // margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.Rotation .point-top {
  width: 100%;

  padding-bottom: 24px;

  .point-input {
    width: 227px;
    outline: none;
    margin-right: 20px;
    padding-left: 14px;
    border-radius: 3px;
    height: 40px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}


.lunbo-search {
  height: 40px;

  button {
    width: 61px;
    height: 40px;
    background-size: 19px 20px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    text-align: center;
    // border-radius: 5px;
    background-color: #ff5478;
    background-image: url("../assets/btnsearch.png");

    align-items: center;
  }
}

.lunbo-add {
  height: 40px;

  button {
    width: 96px;
    height: 40px;
    color: #f5f5f5;
    text-align: center;
    border: none;
    // border-radius: 5px;
    background-color: #FF5478;
    /* 不支持线性的时候显示 */
    background-image: linear-gradient(to left, #FF5478, #FF7AAF);


    align-items: center;
  }
}

.Rota-two-btn {
  display: flex;
  margin-right: 10px;
  color: #ff5478;
}

.del-text {
  text-align: left;
  display: inherit;
}

.Rotation .point-top div {
  margin-right: 15px;
}

.Rotation .point-top div button {
  // margin-top: 2px;
}

.el-select {
  margin-right: 26px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-right: 26px;
}

.el-button--primary {
  margin-right: 15px;
}

.Rotation .form-list {
  // width: 1100px;
  // margin-top: 35px;
  // margin: 0 auto;
  // border: 1px solid red;
  // border-right:1px solid red;
}

table {
  border: 1px solid #ebebeb;
  width: 888px;
  height: 377px;
  text-align: center;
}

.Rotation .form-top {
  background-color: rgb(242, 242, 242);
}

tr {
  border: 1px solid #ebebeb;
}

td {
  width: 100px;
  font-size: 13px;
  color: #333333;
  height: 30px;
  //  padding-top: 5px;
  line-height: 30px;
  //     border-top:  1px solid red;
  border: 1px solid #ebebeb;

  img {
    padding-top: 15px;
  }
}

.Rotation .again-pwd {
  width: 248px;
  margin: 0 auto;
  justify-content: center;
  text-align: center;
  display: flex;
}

button {
  // padding: 11px 15px;
  // margin-top: 10px;
  // margin-bottom: 10px;
  font-size: 14px;
}

// 分页
.Rotation .page {
  margin-top: 40px;
}

.Rotation .page-num {
  width: 50px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.Rotation .page-select {
  margin-right: 15px;
  width: 123px;
  margin-top: -10px;

  input {
    height: 21px;
  }
}

.page-numBer {
  margin-top: -6px;
}

.Rotation .go-page {
  width: 500px;
  margin-left: 16px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

// .el-dialog__title {
//   display: inherit !important;
//   text-align: left !important;
// }
.el-dialog__header {
  text-align: left !important;
}

.el-input__icon {
  line-height: 21px !important;
}

.el-button--primary {
  margin-right: 0 !important;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}

.el-input__icon {
  line-height: 21px !important;
}

.user-Left li {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  padding-left: 10px;
  color: #333333;
  margin-bottom: 20px;
}

.user-Left .other>div {
  padding-top: 10px;
  margin-left: 10px;
}

.left-content {
  border-right: 1px solid #f2f2f2;
  height: 600px;
}

.other {
  display: flex;
  background-color: #f2f2f2f2;
  color: #7f7f7f;
}

.el-dialog {
  width: 600px !important;
}

.el-dialog__body {
  min-width: 600px;
}

// 删除
.del-left {
  text-align: left;
}

.tree {
  width: 900px;
  margin-top: 50px;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}

.cinseffr {
  overflow-y: auto;
  height: 60vh;
}
</style>